<!--
 * @Author      : ZhouQiJun
 * @Date        : 2024-06-03 15:47:57
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2025-08-09 04:37:18
 * @Description :
-->
<script setup>
import { defineAsyncComponent, h, ref } from 'vue'

import { componentPath, menuList } from '@ol/demos/menu'

const currentPath = ref('initMap')
const comCache = new Map()

function toView(path) {
  currentPath.value = path
}

function getComponent(key = 'initMap') {
  if (comCache.has(key)) {
    return comCache.get(key)
  }
  if (!componentPath[key]) return h('div', `${key} 暂无对应组件...`)
  const com = defineAsyncComponent(componentPath[key])
  comCache.set(key, com)
  return com
}
const opends = ['initMap']
</script>

<template>
  <el-row class="h-full">
    <el-col :span="3">
      <el-menu :default-active="opends[0]" :default-openeds="opends">
        <el-sub-menu v-for="menu in menuList" :key="menu.name" :index="menu.path">
          <template #title>
            <span>{{ menu.name }}</span>
          </template>
          <el-menu-item
            v-for="subMenu in menu.children"
            :index="subMenu.path"
            :key="subMenu.name"
            @click="toView(subMenu.path)"
          >
            {{ subMenu.name }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
    <el-col :span="21">
      <component :is="getComponent(currentPath)" />
    </el-col>
  </el-row>
</template>

<style lang="scss">
.h-full {
  height: calc(100%);
  .el-col {
    height: 100%;
    .el-menu {
      height: 100%;
      overflow-y: auto;
    }
  }
}
</style>
